<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>云众科技网上预约挂号系统</title>
	</head>
	<body>
		<div class="container">
			<form class="form-horizontal text-center" style="position:relative;"  name="infoForm" action="javascript:doSub()" method="post" enctype="multipart/form-data">
				<input type="hidden" name="departmentName" value="${person.departmentName }">
				<input type="hidden" name="professionalName" value="${person.professionalName }">
				<input type="hidden" name="doctorPay" value="${person.doctorPay }">
				<input type="hidden" name="ppId" value="${person.ppId}">
				<div class="container" >
					<div class="form-group" style="position:absolute;right: 0px;top: 30px">
						<c:if test="${person.ppPic==null}">
							<img id="image" src="<%=request.getContextPath()%>/static/img/bianque.jpg" width="130" height="150">
						</c:if>
						<c:if test="${person.ppPic!=null}">
							<img id="image" src="<%=request.getContextPath()%>/base/download?url=${person.ppPic}" width="130" height="150">
						</c:if>
						<input type="file" name="pic" onchange="yuLan(this,'image','preview')" >
					</div>
					<div class="form-group" >
						<label class="control-label col-sm-2 col-md-2">人员姓名:</label>
						<div class="col-md-4 col-sm-4">
							<input class="form-control" name="ppName" required value="${person.ppName}" placeholder="请输入人员姓名" />
						</div>	
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 col-md-2">关联用户:</label>
						<div class="col-md-4 col-sm-4">
							<select name="userId" class="form-control">
								<option value="">===请选择===</option>
								<c:forEach items="${userList}" var="user">
									<option value="${user.userId }" onclick="checkUserRole('${user.hasDocRole}')" ${user.userId==person.userId?"selected":"" } >${user.userName }</option>
								</c:forEach>								
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 col-md-2">所属部门:</label>
						<div class="col-md-4 col-sm-4">
							<select name="departmentId" class="form-control" onchange="changeDept(this)">
								<option value="">===请选择===</option>
								<c:forEach items="${deptList}" var="dept">
									<option value="${dept.dpId }" ${dept.dpId==person.departmentId?"selected":"" }>${dept.dpName }</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 col-md-2">职称:</label>
						<div class="col-md-4 col-sm-4">
							<select name="professionalId" class="form-control" onchange="changePro(this)">
								<option value="">===请选择===</option>
								<c:forEach items="${proList}" var="pro">
									<option value="${pro.professionalId }" ${pro.professionalId==person.professionalId?"selected":"" }>${pro.professionalName }</option>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2 col-md-2">人员信息:</label>
						<div class="col-md-6 col-sm-6">
							<textarea class="form-control" name="ppInfo" rows="3" placeholder="请输人员信息" >${person.ppInfo }</textarea>
						</div>
					</div>
					<div class="form-group" id="docDomain" style="visibility: hidden;">
						<label class="control-label col-sm-2 col-md-2">擅长领域:</label>
						<div class="col-md-6 col-sm-6">
							<textarea class="form-control" name="doctorDomain" rows="3" placeholder="请输擅长领域" >${person.doctorDomain }</textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
							
						</div>
						<div class=" col-lg-4 col-md-4 col-sm-8 col-xs-8" >
							<div class="col-md-6 col-sm-6">
								<input class="form-control btn-primary" type="submit" value="提交" />
							</div>
							<div class="col-md-6 col-sm-6">
								<input class="form-control btn-primary" type="button" onclick="goBack()" value="返回" />
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
							
						</div>
					</div>
				</div>
			</form>
			<hr/>
		</div>
	</body>
	<script type="text/javascript">
		//职称集合的全局变量
		var listPro;
		
		$(function(){
			if("${person==null}"=="false"){
				if("${person.standby}"=="true"){
					$("#docDomain").css("visibility","visible");
				}
				var url = "<%=request.getContextPath()%>/sys/listProByDpId";
				var data = {dpId:"${person.departmentId}"};
				$.post(url,data,function(msg){
					listPro = msg;
				},"json");
			}
		})
		//h5对医生姓名进行验证的提示信息
		document.getElementsByName("ppName")[0].oninput = function(){
			document.getElementsByName("ppName")[0].setCustomValidity("");
		};
		
		document.getElementsByName("ppName")[0].oninvalid = function(){
			document.getElementsByName("ppName")[0].setCustomValidity("请输入人员的姓名!");
		};
		//提交方法
		function doSub(){
			bootbox.confirm("确定要提交吗?", function(result) {
				if(result){
					$("form[name='infoForm']").attr("action","<%=request.getContextPath()%>/sys/saveOrUpdatePerson");
					$("form[name='infoForm']").submit();
				}
			})
		}
		function goBack(){
			history.go(-1);
		}
		//当部门选项发生改变时，联动显示职称，改变部门名称
		function changeDept(deptSelect){
			var dpId = deptSelect.value;
			if(dpId==""){
				$("select[name='professionalId']").html("<option value=''>===请选择===</option>");
				changePro($("select[name='professionalId']")[0]);
				return;
			}
			var children = deptSelect.children;
			for(i in children){
				if(children[i].value==dpId){
					$("input[name='departmentName']").val(children[i].innerHTML);
					break;
				}
			}
			//ajax
			var url = "<%=request.getContextPath()%>/sys/listProByDpId";
			var data = {dpId:dpId};
			$.post(url,data,function(msg){
				listPro = msg;
				var opts = "<option value=''>===请选择===</option>";
				for(i in msg){
					opts+="<option value='"+msg[i].professionalId+"'>"+msg[i].professionalName+"</option>";
				}
				$("select[name='professionalId']").html(opts);
				changePro($("select[name='professionalId']")[0]);
			},"json");
		}
		//当职称选项发生改变时，修改职称对应的出诊费用,改变职称名称
		function changePro(proSelect){
			var proId = proSelect.value;
			if(proId==""){
				$("input[name='professionalName']").val("");
				$("input[name='doctorPay']").val("");
				return;
			}
			var children = proSelect.children;
			for(i in children){
				if(children[i].value==proId){
					$("input[name='professionalName']").val(children[i].innerHTML);
					break;
				}
			}
			for(i in listPro){
				if(listPro[i].professionalId==proId){
					$("input[name='doctorPay']").val(listPro[i].professionalFee);
					break;
				}
			}
		}
		
		//判断用户是否有医生的角色
		function checkUserRole(hasRole){
			if(hasRole=="true"){
				$("#docDomain").css("visibility","visible");
			}else{
				$("textarea[name='doctorDomain']").html("");
				$("#docDomain").css("visibility","hidden");
			}
		}
	</script>
</html>